<%- include("components/header", {type:''}) %>

<div id="fh5co-page">
	<div id="fh5co-main">
		<div class="posts">
            <!-- <img class="userAvator" src="images/<%= posts.avator %>" onerror="this.src='http://blog.wclimb.site/images/defadivt.jpg'"> -->
            <div class="title"><a href="/posts/<%= posts.id %>"><%- posts.title %></a></div>
            <div class="msg">
                <span title="<%= posts.name %>">作者: <%= posts.name %></span>
                <span>评论数：<%= posts.comments %></span>
                <span>浏览量：<%= posts.pv %></span>
                <span>发表时间：<%= posts.moment %></span>
            </div>
            <div class="content markdown"><%- posts.content %></div>
            <div class="text-right">
                <% if(session && session.user ===  posts.name || session.user === 'admin'){ %>
                    <a class="btn btn-primary" href="<%= posts['id'] %>/edit">编辑</a>
                    <a class="btn btn-danger delete_post">删除</a>
                <% } %>
            </div>
        </div>
    
        <div class="comment_wrap">
            <% if(session.user){ %>
            <form class="form" onsubmit="return false;">
                <textarea id="spContent" class="form-control" name="content" cols="82"></textarea>
                <div class="text-right submit" style="margin-top:10px;"><button class="btn btn-primary">发表留言</button></div>
            </form>
            <% } else{ %>
                <hr>
                <p class="tips">登录之后才可以评论哟</p>
            <% } %>
            <% if (commentPageLenght > 0) { %>
            <div class="comment_list markdown">
                <% pageOne.forEach(function(res){ %>
                    <div class="cmt_lists">
                        <div class="cmt_content">
                            <div class="userMsg">
                                <img src="../images/<%= res['avator'] %>" onerror="this.src='http://blog.wclimb.site/images/default.jpg'">
                                <div class="cmt_detail"><span><%= res['name'] %></span>：<%- res['content'] %></div>
                            </div>
                            <div class="cmt_operation">
                                <span><%= res['moment'] %></span>
                                <span class="cmt_del">
                                    <% if(session && session.user ===  res['name']){ %>
                                        <a class="delete_comment" href="javascript:delete_comment(<%= res['id'] %>);"> 删除</a>
                                    <% } %>
                                </span>
                            </div>
                        </div>
                    </div>
                <% }) %>
            </div>	
            <% } else{ %>
                <p class="tips">还没有评论，赶快去评论吧！</p>
            <% } %>
            <div style="margin-top: 30px" class="pagination" id="page"></div>	
        </div>
	</div>
</div>

<script>
    var userName = "<%- session.user %>"
    pagination({
        selector: '#page',
        totalPage: <%= commentPageLenght %>,
        currentPage: 1,
        prev: '上一页',
        next: '下一页',
        first: true,
        last: true,
        showTotalPage:true,
        count: 2//当前页前面显示的数量
    },function(val){
        // 当前页
        var _comment = ''
        $.ajax({
            url: "<%= posts.id %>/commentPage",
            type: 'POST',
            data:{
                page: val
            },
            cache: false,
            success: function (msg) {
                //console.log(msg)
                _comment = ''
                if (msg != 'error') {
                    $('.comment_list').html(' ')
                    $.each(msg,function(i,val){
                        //console.log(val.content)
                        _comment += '<div class=\"cmt_lists\"><div class=\"cmt_content\"><div class=\"userMsg\"><img src = \"../images/'+ val.avator +'\" onerror=\"this.src=\'http://blog.wclimb.site/images/default.jpg\'\"><span>'+ val.name +'</span></div ><div class="cmt_detail">'+ val.content + '</div><span class=\"cmt_time\">'+ val.moment +'</span><span class=\"cmt_name\">';
                            if (val.name == userName) {
                                _comment += '<a class=\"delete_comment\" href=\"javascript:delete_comment('+ val.id +');\"> 删除</a>'
                            }
                        _comment += '</span></div></div>'
                    })
                    $('.comment_list').append(_comment)
                }else{
                    console.log('分页不存在')
                } 
            }
        })
    
    })
    
    // 删除文章
    $('.delete_post').click(() => {
        $.ajax({
            url: "<%= posts.id %>/remove",
            type: 'POST',
            cache: false,
            success: function (msg) {
                if (msg.data == 1) {
                    fade('删除文章成功')
                    setTimeout(() => {
                        window.location.href = "/posts"
                    }, 1000)
                } else if (msg.data == 2) {
                    fade('删除文章失败');
                    setTimeout(() => {
                        window.location.reload()
                    }, 1000)
                }
            }
        })
    })

    // 评论
    var isAllow = true
    $('.submit').click(function(){
        if (!isAllow) return
        isAllow = false
        if ($('#spContent').val().trim() == '') {
            fade('请输入评论！')
            return
        }else{
            $.ajax({
                url: '/posts/<%= posts.id %>',
                data:$('.form').serialize(),
                type: "POST",
                cache: false,
                dataType: 'json',
                success: function (msg) {
                    if (msg) {
                        fade('发表留言成功')						
                        setTimeout(()=>{
                            isAllow = true
                            window.location.reload()
                        },1500)
                    }
                },
                error: function () {
                    fade('异常');
                }
            })
        }
    })

    // 删除评论
    function delete_comment(id) {
        $.ajax({
            url: "<%= posts.id %>/comment/" + id + "/remove",
            type: 'POST',
            cache: false,
            success: function (msg) {
                console.log(msg)
                if (msg.data == 1) {
                    fade('删除留言成功')
                    setTimeout(() => {
                        window.location.reload()
                    }, 1000)
                } else if (msg.data == 2) {
                    fade('删除留言失败');
                    setTimeout(() => {
                        window.location.reload()
                    }, 1500)
                }
            },
            error: function () {
                fade('异常')
            }
        })
    }

    // 提示
    function fade(txt){
        $('.message').text(txt)
        $('.message').animate({
            top:0
        })
        setTimeout(function(){
            $('.message').animate({
                top: '-100%'
            })
        },1500)
    }
</script>

<%- include("components/footer") %>